<template>
    <div class="complete">
        <el-card style="max-width: 100%;">
            <template #header>
                <div class="card-header">
                    <span>实名信息</span>
                </div>
            </template>
            <!-- 提示部分 -->
            <p>
            <div class="icon">
                <InfoFilled />
            </div>
            完成实名认证后才能添加就诊人，正常进行挂号，为了不影响后续步骤，建议提前实名认证。
            </p>
            <!-- 实名认证 -->
            <div class="auth" v-if="userInfo?.authStatus == 0">
                <el-form ref="form" label-width="80px">
                    <el-form-item label="用户信息">
                        <el-input placeholder="请输入用户信息"></el-input>
                    </el-form-item>
                    <el-form-item label="证件类型">
                        <el-select placeholder="请选择证件类型" clearable>
                            <el-option label="身份证"></el-option>
                            <el-option label="户口本"></el-option>
                        </el-select>

                    </el-form-item>
                    <el-form-item label="证件号码">
                        <el-input placeholder="请输入证件号码"></el-input>
                    </el-form-item>
                    <el-form-item label="上传证件">
                        <el-upload border>
                            <img src="../../../assests/images/auth_example.png" alt="">
                        </el-upload>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="default">提交</el-button>
                        <el-button type="primary" size="default">重写</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!-- 展示实名信息 -->
            <div class="realInfo">
                <el-descriptions style="margin-top: 10px; auto" :column="1" border>
                    <el-descriptions-item label="用户姓名" label-align="center" :width="20">
                        {{ userInfo?.name }}
                    </el-descriptions-item>
                    <el-descriptions-item label="证件类型" label-align="center" :width="20">
                        {{ userInfo?.certificatesType == "10" ? "身份证" : "户口本" }}
                    </el-descriptions-item>
                    <el-descriptions-item label="证件号码" label-align="center" :width="20">
                        {{ userInfo?.certificatesNo }}
                    </el-descriptions-item>
                </el-descriptions>
            </div>

        </el-card>
    </div>


</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { UseringoResponseData, UserInfo } from '@/api/email/type'
import { getRealInfo } from '@/api/email/index'

onMounted(() => {
    getReal()
})


let isReal = ref<boolean>(false)
let userInfo = ref<UserInfo>()

// 获取认证信息
const getReal = async () => {
    let result = await getRealInfo()
    if (result.code == 200) {
        userInfo.value = result.data
        console.log(userInfo.value);

    }
}

</script>

<style scoped lang="scss">
.complete {
    width: 100%;
    margin: 20px 0 0 20px;

    p {
        line-height: 20px;
        display: flex;
        justify-content: center;
        color: #7f7f7f;

        .icon {
            width: 20px;
            margin-right: 5px;
        }
    }

    .auth {
        width: 100%;

        :deep(.el-form) {
            width: 60%;
            margin: 20px auto;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>